﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Uber.Dto.CropDisplay>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Crop
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    
    <script language="Javascript" type="text/javascript">

        $(function() {
            jQuery('#cropbox').Jcrop({
                setSelect: [ 0, 0, 200, 150 ],
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1.333
            });

        });
        
         function updateCoords(c) {
		        jQuery('#x').val(c.x);
		        jQuery('#y').val(c.y);
		        jQuery('#w').val(c.w);
		        jQuery('#h').val(c.h);
		    }

        function showPreview(coords) {
        updateCoords(coords);
        
            if (parseInt(coords.w) > 0) {
                var rx = 200 / coords.w;
                var ry = 150 / coords.h;

                jQuery('#preview').css({
                    width: Math.round(rx * <%=Model.ImageWidth %>) + 'px',
                    height: Math.round(ry * <%=Model.ImageHeight %>) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }
        }		
        </script>
        
        <div class="inputform">
        <fieldset>
        <legend>Select thumbnail</legend>
    
    <div style="float:right;">
    <img src="<%=Url.Content("~/ResourceStorage/Temp/" + User.Identity.Name + ".jpg") %>" id="cropbox" alt="crop" />
        </div>    
    <div style="width: 190px; height: 143px; overflow: hidden;">
        <img src="<%=Url.Content("~/ResourceStorage/Temp/" + User.Identity.Name + ".jpg") %>" id="preview" alt="thumb" />
    </div>
    
    <% using (Html.BeginForm())
       {%>
    
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        
        <%=Html.SubmitButton("submit", "select") %>
<%
       }%>
       </fieldset>
       </div>
</asp:Content>
